<template>
  <!-- 有下级，用el-sub-menu，无下级用el-menu-item -->
  <template v-for="item in menuList" :key="item.catalogId">
    <!-- 非叶子节点 -->
    <el-sub-menu v-if="item.children?.length" :index="item.catalogId">
      <template #title>
        <KoiGlobalIcon v-if="item.catalogType == 1 && item.catalogId != 0" name="FolderOpened" size="18"></KoiGlobalIcon>
        <KoiGlobalIcon v-if="item.catalogId == 0" name="House" size="18"></KoiGlobalIcon>        
        <el-tooltip :content="item.catalogName" :show-after="1500" placement="right">
          <span class="menu-ellipsis" v-text="item.catalogName"></span>
        </el-tooltip>
      </template>
      <ColumnSubMenu :menuList="item.children" @content="$emit('content', $event)" />
    </el-sub-menu>
    <!-- 叶子节点[功能节点] -->
    <el-menu-item v-else :index="item.catalogId" @click="handleCatalog(item)">
      <KoiGlobalIcon v-if="item.catalogType == 1 && item.catalogId != 0" name="FolderOpened" size="18"></KoiGlobalIcon>
      <KoiGlobalIcon v-if="item.catalogId == 0" name="House" size="18"></KoiGlobalIcon>      
      <template #title>
        <el-tooltip :content="item.catalogName" :show-after="1500" placement="right">
          <span class="menu-ellipsis" v-text="item.catalogName"></span>
        </el-tooltip>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import ColumnSubMenu from "@/views/blog/library/components/ColumnSubMenu.vue";

// 获取父组件传递过来的数据
defineProps(["menuList"]);

// 子组件调用父组件方法
const $emit = defineEmits(['content']);

const handleCatalog = (row: any) => {
  // console.log("子组件", row);
  $emit('content', row);
};
</script>

<style lang="scss" scoped>
/** 菜单标题过长使用省略号 */
.menu-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.el-menu-item {
  height: $aside-menu-height !important;
  margin-bottom: $aside-menu-margin-bottom;
  font-weight: $aside-menu-font-weight;
  --el-menu-item-height: $aside-menu-height;
  // color: #000000;
  user-select: none;
  border-radius: $aside-menu-border-left;

  // @apply dark:c-#E5E3FA;
  color: var(--el-menu-text-color);
  i {
    transform: translate($aside-menu-font-icon-translate); // 图标偏移
  }
  span {
    transform: translate($aside-menu-font-icon-translate); // 文字偏移
  }

  // 设置鼠标悬停时el-menu-item的样式
  &:hover {
    // color: var(--el-color-primary);
    color: var(--el-menu-hover-text-color);
    // background: var(--el-color-primary-light-8);
    background: var(--el-menu-hover-bg-color);

    // & 含义 .el-menu-item
    border-radius: $aside-menu-border-left;

    // 实现鼠标悬停时icon变色
    i {
      // color: var(--el-color-primary);
      color: var(--el-menu-hover-text-color);
    }
  }

  // 设置选择el-menu-item时的样式
  &.is-active {
    // color: var(--el-color-primary);
    color: var(--el-menu-active-text-color);
    // background: var(--el-color-primary-light-8);
    background: var(--el-menu-active-bg-color);
  }
}

:deep(.el-sub-menu__title) {
  height: $aside-menu-height;
  padding-right: 0; // 去除collapse缩小多余的边框
  margin-bottom: $aside-menu-margin-bottom;
  font-weight: $aside-menu-font-weight;
  // color: #000000;

  /* 设置用户禁止选择 */
  user-select: none;
  border-radius: $aside-menu-border-left;

  // @apply dark:c-#E5E3FA;
  color: var(--el-menu-text-color);
  i {
    transform: translate($aside-menu-font-icon-translate); // 图标偏移
  }
  span {
    transform: translate($aside-menu-font-icon-translate); // 文字偏移
  }
  &:hover {
    // color: var(--el-color-primary);
    color: var(--el-menu-hover-text-color);
    // background: var(--el-color-primary-light-8);
    background: var(--el-menu-hover-bg-color);
  }
  &:active {
    // color: var(--el-color-primary);
    color: var(--el-menu-active-text-color);
    // background: var(--el-color-primary-light-8);
    background: var(--el-menu-active-bg-color);
  }
}
</style>

<style lang="scss">
/** 子级菜单字体高亮，父级菜单也高亮 */
.el-sub-menu.is-active > .el-sub-menu__title {
  // color: var(--el-color-primary) !important;
  color: var(--el-menu-active-text-color) !important;
}

/** icon图标也跟着变 */
.el-sub-menu.is-active > .el-sub-menu__title i {
  // color: var(--el-color-primary) !important;
  color: var(--el-menu-active-text-color) !important;
}
</style>


